<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .menu {font-weight:bold; font-size:1em; padding:2em}
        tr {line-height:2.5em}
        .content{
            width: 100vw;
            height: 100vh;
            background-color: burlywood;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<div class="content">
    <div style='text-align:center;padding:0.7em'><h1>点餐服务系统</h1></div>
    <center>
        <button onclick="showBooks(1)">第1页</button>
        <button onclick="showBooks(2)">第2页</button>
        <button onclick="showBooks(3)">第3页</button>
        <button onclick="showBooks(4)">第4页</button>
        <br><br>
        <table style='width:80%' border='0' cellpadding='10'>
            <tr style='background-color: rosybrown;color: wheat'>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
            </tr>
            <tbody id="bookTable" >
            </tbody>
        </table>
    </center>
</div>


</body>

<script lang="javascript">

    function showBooks(page) {
        $.ajax({
            url: "./books?page=" + page,
            method: "GET",
            dataType: "json"
        }).done(function(result){
            updateBookTable(result.books);
        }).fail(function(xhr, status){
            console.log(status);
        });

        console.log("button clicked!");
    }

    function updateBookTable(books) {
        var t = $("#bookTable");
        t.empty();

        for (var i=0; i<books.length; i++) {
            var b = books[i];
            var tr = i % 2 == 0 ? $("<tr></tr>") : $("<tr style='background-color:#eee'></tr>");
            tr.append("<td>" + b.id + "</td>");
            tr.append("<td>" + b.name + "</td>");
            tr.append("<td>" + b.author + "</td>");
            tr.append("<td>" + b.type + "</td>");
            tr.append("<td>" + b.price + "</td>");
            tr.append("<td>" + b.describe + "</td>");

            t.append(tr);
        }

    }

</script>


</html>